<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" v-if="type==1" @click="type=2">上传视频</el-button>
				<el-button v-else @click="type=1">返回列表</el-button>
			</div>
		</el-header>
		<el-main v-if="type==1" class="nopadding">
			<scTable ref="table" :apiObj="apiObj" :params="params" stripe>
				<el-table-column label="ID" prop="id" width="60"></el-table-column>
				<el-table-column label="视频标题" prop="title"></el-table-column>
				<el-table-column label="话题" prop="huati"></el-table-column>
				<el-table-column label="状态" prop="status" width="80">
					<template #default="scope">
						<span v-if="scope.row.status==0">未审核</span>
						<span style="color: #67C23A" v-else-if="scope.row.status==1">审核通过</span>
						<span style="color: #F56C6C" v-else>审核不通过</span>
					</template>
				</el-table-column>

				<el-table-column label="操作" align="right" width="300">
					<template #default="scope">
						<el-button type="text" size="small" @click="type=3,bofangVideo=scope.row.video">查看视频</el-button>

						<template v-if="scope.row.status==0">
							<el-button type="success" size="mini" @click="shenghe(scope.row, 1)">审核通过</el-button>
							<el-button type="danger" size="mini" @click="shenghe(scope.row, 2)">审核不通过</el-button>
						</template>
						<template v-else-if="scope.row.status==1">
							<el-button type="text" size="small" @click="table_edit(scope.row)">编辑</el-button>
							<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row)">
								<template #reference>
									<el-button type="text" size="small">删除</el-button>
								</template>
							</el-popconfirm>
						</template>
						<template v-else>
							<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row)">
								<template #reference>
									<el-button type="text" size="small">删除</el-button>
								</template>
							</el-popconfirm>
						</template>
					</template>
				</el-table-column>

			</scTable>
		</el-main>
		<el-main v-else-if="type==2">
			<el-form :model="scform" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="80px"
					 label-position="top">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="视频标题" prop="title">
							<el-input v-model="scform.title"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="话题" prop="huati">
							<el-input v-model="scform.huati"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="视频" prop="video">
							<el-upload limit=1 :auto-upload="false" ref="upload" accept=".mov,.mp4" :on-success="success" :multiple="false" action="void" :http-request="customUpload">
								<template #trigger>
									<el-button size="small" type="primary">选取视频</el-button>
								</template>
								<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
							</el-upload>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-button type="primary" @click="addVideo">提交</el-button>
					</el-col>
				</el-row>
			</el-form>
		</el-main>

		<el-main v-else-if="type==3">
			<video width="730" height="420" align="center" style="margin: 0 auto" controls>
				<source :src="bofangVideo" type="video/mp4">
			</video>
		</el-main>
	</el-container>
</template>

<script>
import axios from 'axios';
export default {
	name: "splist",
	data() {
		return {
			type: 1,
			apiObj: '',
			store_id: '',
			params: {},
			scform: {
				id: '',
				// store_id:'',
				user_id: '',
				title: '',
				huati: '',
				video: ''
			},
			imgurl3: '',
			uploadApi: this.$API.video.qiniuUpload,
			rules: {
				title: [
					{required: true, message: '请输入视频标题'}
				],
				// huati: [
				// 	{required: true, message: '请输入话题'}
				// ],
				video: [
					{required: true, message: '请上传视频'}
				]
			},
			bofangVideo: '',
			qiniuToken: ''
		}
	},
	mounted() {
		this.getQiniuToken()
	},
	methods: {
		setData(data) {
			this.apiObj = this.$API.store.vlist
			this.scform.user_id = data.user_id
			this.params = {user_id: data.user_id}
		},
		getQiniuToken() {
			this.$API.video.getQiniuToken.get().then((res) => {
				this.qiniuToken = res.data.token
			})
		},
		customUpload(file) {
			let FormDatas = new FormData();
			FormDatas.append('file', file.file);

			let key = this.getKey(file.file.name)
			FormDatas.append('key', key)
			FormDatas.append('token', this.qiniuToken)
			axios({
				url: 'https://upload-z2.qbox.me',
				method: 'post',
				data: FormDatas,
				//上传进度
				onUploadProgress: (progressEvent) => {
					let num = progressEvent.loaded / progressEvent.total * 100 | 0;  //百分比
					file.onProgress({percent: num})     //进度条
				}
			}).then(data => {
				file.onSuccess(data); //上传成功(打钩的小图标)
			})
		},
		table_show(data) {
			location.href = data.video
		},
		getKey(name){
			let houzui = name.split('.').pop()
			let time = new Date().getTime();
			let key = 'video_'+time+'.'+houzui
			return key
		},
		table_del(data) {
			this.$API.store.vdel.post({id: data.id}).then(res => {
				if (res.code == 200) {
					this.$message.success(res.msg)
					this.$refs.table.getData()
				} else {
					this.$alert(res.msg, "提示", {type: 'error'})
				}
			})
		},
		table_edit(data) {
			this.type = 2
			this.scform.id = data.id
			// this.scform.store_id = data.id
			this.scform.user_id = data.user_id
			this.scform.title = data.title
			this.scform.huati = data.huati
			this.scform.video = data.video
		},
		shenghe(row, type) {
			var data = {id: row.id, status: type}
			this.$API.store.vshenghe.post(data).then(res => {
				if (res.code == 200) {
					this.$message.success(res.msg)
					this.$refs.table.getData()
				} else {
					this.$alert(res.msg, "提示", {type: 'error'})
				}
			});
		},

		submitUpload() {
			this.$refs.upload.submit();
		},
		success(response) {
			let video = 'https://file.diqiuying.com/'+response.data.key
			this.scform.video = video
		},
		addVideo() {
			let that = this
			this.$refs.dialogForm.validate((valid) => {
				if (valid) {
					console.log(valid)
					this.$API.video.addVideo.post(this.scform).then(res => {
						if (res.code == 200) {
							that.type = 1
							this.$message.success(res.msg)
							// this.$refs.table.getData()
						} else {
							this.$alert(res.msg, "提示", {type: 'error'})
						}
					});
				} else {
					return false;
				}
			})
		}
	}
}
</script>

<style scoped>
.el-card + .el-card {
	margin-top: 15px;
}

.imglist {
	margin-bottom: 0;
}

.imglist .el-col + .el-col {
	margin-left: 10px;
}

.custom-empty {
	width: 100%;
	height: 100%;
	line-height: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.custom-empty i {
	font-size: 40px;
	color: #8c939d;
}

.custom-empty p {
	font-size: 12px;
	font-weight: normal;
	color: #8c939d;
	margin-top: 10px;
}
</style>
